About Dave on Design
It’s misnamed.
Once upon a time, I was going to have two websites: one for design articles and critique; one for everything else. But such a separation is artificial. Someone in my position—a product manager or UX designer—might ask, why should the articles be split over two different websites? They’re already categorised quite neatly, and all splitting them does is make one half harder to find. So my design critique site now hosts all articles, essays and other non-fiction.
Ok, onto the site please...
You might have noticed that the site has a fairly unique look and feel. There are a few design goals:
- Beautiful typography. Space sentences wider than words (traditional spacing that’s fallen away in popularity.) Use dropcaps. Be playful: the main text fonts are serious, dropcaps are a space for something a bit whimsical. (The excellent Spirax is used here.) This is a design feature: the best design has an element of the human and whimsical. It allows the user to feel what they’re using was created by a person, and more, a person with a sense of both playfulness and beauty: it humanizes the digital, the aluminium and glass, the inhumane.
- Be light. In the age of heavy web apps even for straightforward purposes like blogs, make a site without Javascript, without scripted dynamic behaviour, and using only HTML and CSS. Yet, have complex layout and interactive elements like image sliders. It turns out I can do almost everything I want without Javascript—and I have not compromised the goal, so those things are not implemented—and there’s a real pleasure in a site that’s as simple as text and styles.
- Approximately follow design inspired by Edward Tufte, or more specifically the popular tufte CSS. I don’t follow it fully. I prefer justified text, don’t italicise my headings, constrain images to the same borders as text, etc, but I do like the use of sidenotes and sidebar references, allcaps to start sections, serifed fonts, large font sizes, clear paragraph spacing, and so forth. The goal is the same: clear, readable text.
Markdown plus Custom Markup
Dave on Design is built with a custom static site generator written in Python which processes a set of Markdown files and outputs static HTML. Markdown was not flexible enough for the output, and so it also handles custom additions to Markdown via a custom Python templating library, and processes the HTML in various ways (the output is not pretty-printed but it is carefully structured), sanitizes input, verifies output, and so forth.
House Style
The generator adds smart quotes, forces consistent style in terms of use of dashes or other marks, and forces use of ‘house style’ by adding dipthongs in words like ‘encyclopædia’ and New Yorker-style diæresis marks in double-voweled English words like ‘coöperation’, the mark indicating that the two vowels are pronounced separately.
Some of this is personal taste: I like how dipthongs look æsthetically (see? Isn’t it just cool?) and was brought up in a house full of books lots of which had some antiquated spellings and typography, and I feel we’ve lost some elegance with the loss of use of these symbols.
Some, such as use of diæreses, is about clarity. English is a confusing and inconsistent language. Markup (in a developer’s terminology) that assists in pronunciation is a benefit. When I was a child, I found the diacritic and other marks added to the Latin alphabet in other countries weird: we didn’t use them, why would other people? (Youth has such inbuilt assumptions of superiority.) As an adult I traveled. Those additional marks were really useful. And today I live in a country where words are spelled how they’re pronounced: there is no ambiguity. I’ve learned to love spelling that assists pronunciation.
Typography & Layout: Spacing
Above all, though, the site’s look and feel started with one typographical goal in mind: sentence spacing. Someday I’ll write a full article, but in summary: text is divided into larger and smaller pieces (sections, paragraphs, sentences, words, and letters) and we generally space these large to smaller: vertical spacing between sections, smaller vertical spacing between paragraphs and sometimes a starting indent, right down to a small spacing between words and very small between letters. The only exception is between sentences: usually, the gap between the end of a sentence and start of another is the same as the gap word-to-word. But why? They are a different and larger syntactical element.
It turns out we used to have slightly wider spacing between sentences than we do today. This site implements that in CSS—it was remarkably hard, because HTML has no concept of a sentence; its smallest syntactical markup element is the paragraph—but derives a somewhat old-fashioned, I hope elegant, and I believe more readable style through this careful use of spacing and layout.
My general view on all things like this—æsthetic choices—is not that there is a right and wrong. It is not wrong to word-space sentences. It is not wrong to give sentences wider spacing. What’s important is that someone can make these choices if they like. HTML and CSS currently make typographical choices like these hard, and I hope in future to see CSS expand to allow more control over typographical layout.
Font Credits
Dave on Design is currently typeset with:
- Main text: EB Garamond by George Duffner, Octavio Pardo et al, licensed under the SIL Open Font License. The italic form is Cormorant Garamond by Christian Thalmann and the Cormorant Project Authors, similarly licensed under the SIL Open Font License.
- Headings: Sorts Mill Goudy by Barry Schwartz, listed by Google Fonts (where I found it) as the SIL Open Font License, and on Mr Schwartz’s site (a newer version?) as the MIT license
- Dropcaps: Spirax by Brenda Gallo and Gustavo Dipre, licensed under the SIL Open Font License.
- Code: Cutive Mono by Vernon Adams licensed under the SIL Open Font License.
My thanks to those designers for making such beautiful fonts available under open licenses.
Copyright & Other Notes
The entire site—content, images, etc—is copyright 2022-2023 and later David Millington.
Some articles have previously been published elsewhere. They are republished by permission, and the original location is credited in the byline of each as appropriate. Many thanks to the original publishing locations for their kind permission to republish articles after a time expiry.
Some of the articles, especially in the Management section, recount stories. While always true, these are carefully anonymised. Please do not attempt to correlate any story with a specific past or present workplace, or any individuals to specific real persons.